<template>
    <a-modal :title="form.id ? '编辑' : '新增'" :width="700" centered v-model:visible="visible" cancelText="取消" okText="保存" @ok="handleOk">
        <div>
            <a-form layout="inline" :model="form" ref="ruleFormRef" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="预发布版本号" name="versionNumber">
                            <a-input v-model:value="form.versionNumber" placeholder="请输入版本号限制100个字" :maxlength="100" allow-clear />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="开始时间" name="startTime">
                            <div style="width: 100%">
                                <h-date-picker-cell :disabledDate="false" v-model:value="form.startTime" />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="上线时间" name="onlineTime">
                            <div style="width: 100%">
                                <h-date-picker-cell :disabledDate="false" v-model:value="form.onlineTime" />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="开发阶段">
                            <flexbox style="width: 100%">
                                <div>
                                    <h-date-picker-cell disabled style="width: 200px" :value="form.startTime" />
                                    <span style="margin: 0 8px">~</span>
                                </div>
                                <h-date-picker-cell :disabledDate="false" style="width: 200px" v-model:value="form.randdEndTime" />
                            </flexbox>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="测试阶段">
                            <flexbox style="width: 100%">
                                <h-date-picker-cell :disabledDate="false" style="width: 200px" v-model:value="form.testStartTime" />
                                <div>
                                    <span style="margin: 0 8px">~</span>
                                    <h-date-picker-cell disabled style="width: 200px" :value="form.onlineTime" />
                                </div>
                            </flexbox>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="状态">
                            <a-radio-group v-model:value="form.status">
                                <a-radio value="1">已发布</a-radio>
                                <a-radio value="0">未发布</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </a-modal>
</template>

<script lang="ts">
import api from '@/api';
import { reg1 } from '@/config/pattern';
import { HDatePickerCell } from '@/components';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, reactive, toRefs, nextTick } from 'vue';
export default defineComponent({
    name: 'CreateVersion',
    components: {
        HDatePickerCell
    },
    emits: ['success'],
    setup(_, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            visible: false,
            form: {
                versionNumber: '',
                startTime: '',
                onlineTime: '',
                randdStartTime: '',
                randdEndTime: '',
                testStartTime: '',
                testEndTime: '',
                status: '0',
                catalogCode: null,
                id: null
            }
        });
        const validateRepeatNumber = async (rule: any, value: any) => {
            if (value) {
                const query = {
                    catalogCode: state.form.catalogCode,
                    id: state.form.id,
                    versionNumber: value
                };
                const { success, moule } = await api.pbiProductCalendarModel.isRepeatName(query, { cancelDuplicated: true });
                return success && !moule ? Promise.resolve() : Promise.reject('版本号不能重复');
            } else {
                return Promise.reject('版本号不能为空');
            }
        };
        const validateRepeatOnlineTime = async (rule: any, value: any) => {
            if (value) {
                const query = {
                    catalogCode: state.form.catalogCode,
                    id: state.form.id,
                    onlineTime: value
                };
                const { success, moule } = await api.pbiProductCalendarModel.isRepeatName(query, { cancelDuplicated: true });
                return success && !moule ? Promise.resolve() : Promise.reject('上线时间不能重复');
            } else {
                return Promise.reject('上线时间不能为空');
            }
        };
        // 校验提测名称是否包含特殊字符，因为word和excel文件名不允许特殊字符，交付物的名称是以需求名称创建的
        const validateTestNumber = (rule, value) => {
            if (value) {
                return reg1.test(value) ? Promise.reject('版本号只能输入数字和英文和特殊符号') : Promise.resolve();
            } else {
                return Promise.reject('');
            }
        };
        const rules: any = {
            versionNumber: [
                { required: true, validator: validateTestNumber, trigger: 'blur' },
                { required: true, validator: validateRepeatNumber, trigger: 'blur' }
            ],
            startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
            onlineTime: [{ required: true, validator: validateRepeatOnlineTime, trigger: 'blur' }]
        };
        const getDetailData = async (id: Nullable<number>) => {
            const query = {
                id
            };
            const { success, moule } = await api.pbiProductCalendarModel.findById(query);
            if (success) {
                state.form = {
                    ...moule
                };
                state.visible = true;
            }
        };
        const open = (catalogCode: Nullable<number>, id: Nullable<number> = null) => {
            nextTick(() => {
                unref(ruleFormRef).clearValidate();
            });
            if (id) {
                getDetailData(id);
            } else {
                state.form = {
                    versionNumber: '',
                    startTime: '',
                    onlineTime: '',
                    randdStartTime: '',
                    randdEndTime: '',
                    testStartTime: '',
                    testEndTime: '',
                    status: '0',
                    catalogCode,
                    id
                };
                state.visible = true;
            }
        };
        const handleOk = () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave();
                })
                .catch((err: any) => {
                    console.log(err);
                });
        };
        const handleSave = async () => {
            const { startTime, onlineTime } = state.form;
            const query = {
                ...state.form,
                randdStartTime: startTime,
                testEndTime: onlineTime
            };
            const { success, errorMsg } = await api.pbiProductCalendarModel.save(query);
            state.visible = false;
            if (success) {
                message.success('保存成功');
                emit('success');
            } else {
                message.error(errorMsg);
            }
        };
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            open,
            handleOk
        };
    }
});
</script>